page{
  background-color: white;
}
.home{
  padding-top: 40rpx;

  .header{
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
    padding: 0 40rpx;
    
    &-left{
      display: flex;
      flex-direction: column;
      justify-content: space-between;

      &__name{
        color: #202020;
        font-size: 24rpx;
      }
      &__msg{
        font-size: 44rpx;
        font-weight: bold;
        margin-top: 10rpx;
      }
    }
    &-right{
      display: flex;
      flex-direction: column;

      &__weather{
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-end;
        image{
          width: 34rpx;
          height: 34rpx;
        }
        text{
          font-size: 24rpx;
          color: #202020;
          margin-left: 10rpx;
        }
      }

      &__tip{
        color: #202020;
        font-size: 20rpx;
        margin-top: 12rpx;
      }


    }
  }

  .broadcast{
    height: 48rpx;
    background-color: #ffffff;
    box-shadow: 0px 0px 4rpx 0px 
      rgba(0, 0, 0, 0.2);
    border-radius: 4rpx;
    border: solid 1px #e5e5e5;
    margin: 0 40rpx;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 0 20rpx;
    margin-top: 10rpx;

    &-ball{
      width: 30rpx;
      height: 24rpx;
      margin-right: 22rpx;
    }
    &-swiper{
      flex: 1;
      height: 48rpx;
      
      &__item{
        display: flex;
        flex-direction: row;
        align-items: center;
        font-size: 24rpx;
        color: #fa0707;
        text{
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
      }
    }
  }

  .banner{
    margin-top: 30rpx;
    &-footer{
      height: 60rpx;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      padding: 0 40rpx;
      margin-top: -18rpx;
      &__msg{
        font-size: 24rpx;
        color: #202020;
      }
    }
    &-swiper{
      width: 100%;
      height: 390rpx;
      &__item{
        width: 100%;
        padding: 0 40rpx;
        box-sizing: border-box;
        display: flex;
        flex-direction: row;
        align-items: center;
      }
      &__img{
        width: 100%;
        height: 348rpx;
        display: block;
        background: gray;
        border-radius: 8px;
        box-shadow: 0px 0px 16px 0px rgba(0, 0, 0, 0.2);
        overflow: hidden;
      }
    }
    &-pagination{
      display: flex;
      flex-direction: row;
      align-items: center;
   
      &__item{
        width: 12rpx;
        height: 12rpx;
        background-color: #eff0f0;
        border-radius: 50%;
        flex-shrink: 0;
        margin-right: 24rpx;
        &--active{
          background-color: #16afaa;
        }
      }
    }
  }

  .menu{
    padding: 40rpx;
    &-head{
      display: flex;
      flex-direction: column;
      &__en{
        color: #888888;
        font-size: 24rpx;
      }
      &__zh{
        color: #202020;
        font-size: 36rpx;
        margin-top: 15rpx;
      }
    }
    &-list{
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      padding-top: 20rpx;
      flex-wrap: wrap;
    }
    &-item{
      margin-top: 20rpx;
      width: 210rpx;
      height: 210rpx;
      background-color: #ffffff;
      box-shadow: 0px 0px 4rpx 0px 
        rgba(0, 0, 0, 0.2);
      border-radius: 10rpx;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      position: relative;

      & > image{
        width: 84rpx;
        height: 84rpx;
      }
      & > text{
        color: #202020;
        font-size: 24rpx;
        margin-top: 18rpx;
      }
      &__badge{
        position: absolute;
        width: 28rpx;
        height: 28rpx;
        background-color: #ff0000;
        border-radius: 50%;
        right: 60rpx;
        top: 30rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        text{
          color: white;
          font-size: 24rpx;
          transform: scale(.8);
          transform-origin: center;
        }
      }
    }
  }
}